<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
        <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
        <style>
            #app{
                width:400px;
            }
        </style>
	</head>
	<body>
		<div id="app">
            <h1>珠峰</h1>
            <el-input v-model="input" placeholder="请输入姓名"></el-input>

            <el-radio v-model="radio" label="man">男</el-radio>
            <el-radio v-model="radio" label="woman">女</el-radio>
            <br><br>

            <h3>选择课程</h3>
            <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
            <div style="margin: 15px 0;"></div>
            <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
              <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
            </el-checkbox-group>
        
		</div>
        <!-- 先引入vue.js 再引入 index.js -->
        <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
        <script src="https://unpkg.com/element-ui/lib/index.js"></script>
		<script>
            const cityOptions = ['上海', '北京', '广州', '深圳'];
            var vm=new Vue({
				el:"#app",
                data:{
                    input:'',
                    radio:"man",
                    checkAll: false,
                    checkedCities: ['上海', '北京'],
                    cities: cityOptions,
                    isIndeterminate: true
                },
                methods: {
                    handleCheckAllChange(val) {
                        this.checkedCities = val ? cityOptions : [];
                        this.isIndeterminate = false;
                    },
                    handleCheckedCitiesChange(value) {
                        let checkedCount = value.length;
                        this.checkAll = checkedCount === this.cities.length;
                        this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
                    }
                }
			})
		</script>
       
	</body>
</html>
